/*
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-06-02 15:57:50
 * 医院排班页
 */
import { GetHospitalListDepartResponse, GetHospitalListFindScheduleListResponse, GetHospitalListScheduleResponse } from '@/api/hospital/hospitalList';
import { ReqHosListDepart, ReqHosListDepartList, ReqHospitalFindScheduleList, ReqHospitalScheduleList } from '@/api/hospital/model/hospitalListTypes';
import { Button, Card, Col, Pagination, Row, Table, Tag, message } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import Tree, { DataNode } from 'antd/lib/tree';
import React, { Key, useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function HospitalListSchedule() {
  let navigator=useNavigate()

  let { hoscode } = useParams()

  // 声明医院科室列表
  let [department, setDepartment] = useState<ReqHosListDepartList>([])

  // 声明一级医院科室列表的状态
  let [departList, setDepartList] = useState<string[]>([])

  // 声明医院排班日期当前页的状态
  let [current, setCurrent] = useState<number>(1)
  // 声明医院排班日期显示页的状态
  let [pageSize, setPageSize] = useState<number>(5)
  // 声明医院排班日期总数的状态
  let [total, setTotal] = useState<number>(5)

  // 医院排班日期状态
  let [hosSchedule, setHosSchedule] = useState<ReqHospitalScheduleList>([])
  
  // 医院医生状态
  let [docList, setDocList] = useState<ReqHospitalFindScheduleList>([])


      // 声明医院名称状态
      let [hosname,setHosname]=useState<string>("")
      // 声明科室名称状态
      let [depname,setDepname]=useState<string>("")
      // 声明科室状态
      let [depcode,setDepcode]=useState<string>("")
      // 声明日期名称状态
      let [workDate,setWorkDate]=useState<string>("")

  // 表头
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      // dataIndex: 'id',
      width: 80,
      align: "center",
      render: (value: any, record: any, index: number) => {
        return index + 1
      }

    },
    {
      title: '职称',
      dataIndex: 'title',
      align: "center",
      width: 170,

    },
    {
      title: '号源时间',
      dataIndex: 'workDate',
      width: 100,
      align: "center",
    },
    {
      title: '总预约数',
      dataIndex: 'reservedNumber',
      width: 150,
      align: "center",
    },
    {
      title: '剩余预约数',
      dataIndex: 'availableNumber',
      align: "center",
      width: 150,
    },
    {
      title: '挂号费(元)',
      dataIndex: 'amount',
      width: 130,
      align: "center",
    },
    {
      title: '擅长技能',
      dataIndex: 'skill',
      align: "center",
      width: 240,
    },
  ]

  useEffect(() => {
    async function main() {
      // 获取医院科室
      let result = await GetHospitalListDepartResponse(hoscode as string);
      // 获取一级科室的编号列表
      setDepartList(result.map(item => item.depcode))
      // 给科室添加不可点击属性
      result.forEach(item => {
        item.disabled = true
        return item
      })

      // 设置医院科室列表
      setDepartment(result)

      // 获取第一个一级科室的第一个的门诊 
      // 先拿到它的depcode
      let firstSchedule = (result[0].children as ReqHosListDepartList)[0].depcode

      setDepname((result[0].children as ReqHosListDepartList)[0].depname)
      setDepcode(firstSchedule)

      getWorkDoc(firstSchedule)
    }
    main()
  }, [current,pageSize])

  // // 监听depcode医院科室编号，当获取到并且改变时执行后续操作
  // useEffect(()=>{
  //   if(!depcode) return
  //   getWorkDoc()
  // },[depcode])

  // 封装获取医生列表方法
  let getDoc=async (time:string,depcode:string)=>{
    // 获取第一个日期的医生 默认显示
    let firstDoc=await GetHospitalListFindScheduleListResponse({
        hoscode:hoscode as string,
        depcode:depcode,
        workDate:time
    })
    setDocList(firstDoc)
  }


  // 封装获取科室时间及后续操作方法
  let getWorkDoc=async(depcode:string)=>{
    try{  
    let schedule = await GetHospitalListScheduleResponse({
      page: current,
      limit: pageSize,
      hoscode: hoscode as string,
      depcode:depcode
    })
    setHosname(schedule.baseMap.hosname)
    

    // 将第一个门诊的预约时间数组反转放入状态
    schedule.bookingScheduleList.reverse();
    // 设置第一个门诊的预约时间
    setHosSchedule(schedule.bookingScheduleList)
    
    setTotal(schedule.total)
    let time=schedule.bookingScheduleList[0].workDate
    setWorkDate(time)    
    getDoc(time,depcode)
    
  }catch(e){
    message.error('暂无数据')
    
}



  }
  // 点击科室方法
  let updateSelect=(selectedKeys: Key[], info:any)=>{
      setDepname(info.node.depname)
      setDepcode(info.node.depcode)
      setDocList([])
      getWorkDoc(info.node.depcode)
  }

  return (
    <Card>
      <p>选择：{hosname} / {depname} / {workDate}</p>

      <>
        <Row>
          {/* 左侧科室 */}
          <Col span={5} style={{ border: '1px solid #ddd', height: document.documentElement.clientHeight * 0.7, overflow: 'auto' }}>
            <Tree
              defaultExpandedKeys={['0-0-0', '0-0-1']}
              treeData={department}
              expandedKeys={departList}
              selectedKeys={[depcode]}
              fieldNames={{
                title: 'depname',
                key: 'depcode'
              }}
              onSelect={updateSelect}
            />
          </Col>
          <Col span={18} style={{ marginLeft: 20 }}>


            {/* 右侧时间 */}
            <>
              {
                hosSchedule.map(item => {
                  return <Tag color={item.workDate===workDate?"green":''} key={item.workDate} onClick={()=>{
                    setWorkDate(item.workDate)
                    getDoc(item.workDate,depcode)
                  }}>
                        <div>{item.workDate} {item.dayOfWeek}</div>
                        <div>{item.availableNumber} /{item.reservedNumber}</div>
                  </Tag>
                })
              }
            </>

            {/* 分页 */}
            <Pagination
              className='mt'
              current={current}
              pageSize={pageSize}
              total={total}
              showSizeChanger={true}
              pageSizeOptions={[5, 10, 20]}
              onChange={(page: number, pageSize: number)=>{
                  setCurrent(page)
                  setPageSize(pageSize)
              }}
            />

            {/* 医生信息 */}
            <Table className='mt'
              bordered
              rowKey={'id'}
              columns={columns}
              dataSource={docList}
              pagination={false}

            />

            <Button className='mt' onClick={()=>{
                navigator(-1)
            }} >返回</Button>

          </Col>
        </Row>
      </>
    </Card>
  )


}
